<!DOCTYPE html>
<html>
<head>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <title>ESP32 OV2460</title>
        <style>
            body {
                font-family: Arial,Helvetica,sans-serif;
                background: #181818;
                color: #EFEFEF;
                font-size: 16px
            }
            h2 {
                font-size: 18px
            }
            section.main {
                display: flex
            }
            #menu,section.main {
                flex-direction: column
            }
            #menu {
                display: none;
                flex-wrap: nowrap;
                min-width: 340px;
                background: #363636;
                padding: 8px;
                border-radius: 4px;
                margin-top: -10px;
                margin-right: 10px;
            }
            #content {
                display: flex;
                flex-wrap: wrap;
                align-items: stretch
            }
            figure {
                padding: 0px;
                margin: 0;
                -webkit-margin-before: 0;
                margin-block-start: 0;
                -webkit-margin-after: 0;
                margin-block-end: 0;
                -webkit-margin-start: 0;
                margin-inline-start: 0;
                -webkit-margin-end: 0;
                margin-inline-end: 0
            }
            figure img {
                display: block;
                width: 100%;
                height: auto;
                border-radius: 4px;
                margin-top: 8px;
            }
            @media (min-width: 800px) and (orientation:landscape) {
                #content {
                    display:flex;
                    flex-wrap: nowrap;
                    align-items: stretch
                }
                figure img {
                    display: block;
                    max-width: 100%;
                    max-height: calc(100vh - 40px);
                    width: auto;
                    height: auto
                }
                figure {
                    padding: 0 0 0 0px;
                    margin: 0;
                    -webkit-margin-before: 0;
                    margin-block-start: 0;
                    -webkit-margin-after: 0;
                    margin-block-end: 0;
                    -webkit-margin-start: 0;
                    margin-inline-start: 0;
                    -webkit-margin-end: 0;
                    margin-inline-end: 0
                }
            }
            section#buttons {
                display: flex;
                flex-wrap: nowrap;
                justify-content: space-between
            }
            #nav-toggle {
                cursor: pointer;
                display: block
            }
            #nav-toggle-cb {
                outline: 0;
                opacity: 0;
                width: 0;
                height: 0
            }
            #nav-toggle-cb:checked+#menu {
                display: flex
            }
            .input-group {
                display: flex;
                flex-wrap: nowrap;
                line-height: 22px;
                margin: 5px 0
            }
            .input-group>label {
                display: inline-block;
                padding-right: 10px;
                min-width: 47%
            }
            .input-group input,.input-group select {
                flex-grow: 1
            }
            .range-max,.range-min {
                display: inline-block;
                padding: 0 5px
            }
            button {
                display: block;
                margin: 5px;
                padding: 0 12px;
                border: 0;
                line-height: 28px;
                cursor: pointer;
                color: #fff;
                background: #ff3034;
                border-radius: 5px;
                font-size: 16px;
                outline: 0
            }
            button:hover {
                background: #ff494d
            }
            button:active {
                background: #f21c21
            }
            button.disabled {
                cursor: default;
                background: #a0a0a0
            }
            input[type=range] {
                -webkit-appearance: none;
                width: 100%;
                height: 22px;
                background: #363636;
                cursor: pointer;
                margin: 0
            }
            input[type=range]:focus {
                outline: 0
            }
            input[type=range]::-webkit-slider-runnable-track {
                width: 100%;
                height: 2px;
                cursor: pointer;
                background: #EFEFEF;
                border-radius: 0;
                border: 0 solid #EFEFEF
            }
            input[type=range]::-webkit-slider-thumb {
                border: 1px solid rgba(0,0,30,0);
                height: 22px;
                width: 22px;
                border-radius: 50px;
                background: #ff3034;
                cursor: pointer;
                -webkit-appearance: none;
                margin-top: -11.5px
            }
            input[type=range]:focus::-webkit-slider-runnable-track {
                background: #EFEFEF
            }
            input[type=range]::-moz-range-track {
                width: 100%;
                height: 2px;
                cursor: pointer;
                background: #EFEFEF;
                border-radius: 0;
                border: 0 solid #EFEFEF
            }
            input[type=range]::-moz-range-thumb {
                border: 1px solid rgba(0,0,30,0);
                height: 22px;
                width: 22px;
                border-radius: 50px;
                background: #ff3034;
                cursor: pointer
            }
            input[type=range]::-ms-track {
                width: 100%;
                height: 2px;
                cursor: pointer;
                background: 0 0;
                border-color: transparent;
                color: transparent
            }
            input[type=range]::-ms-fill-lower {
                background: #EFEFEF;
                border: 0 solid #EFEFEF;
                border-radius: 0
            }
            input[type=range]::-ms-fill-upper {
                background: #EFEFEF;
                border: 0 solid #EFEFEF;
                border-radius: 0
            }
            input[type=range]::-ms-thumb {
                border: 1px solid rgba(0,0,30,0);
                height: 22px;
                width: 22px;
                border-radius: 50px;
                background: #ff3034;
                cursor: pointer;
                height: 2px
            }
            input[type=range]:focus::-ms-fill-lower {
                background: #EFEFEF
            }
            input[type=range]:focus::-ms-fill-upper {
                background: #363636
            }
            .switch {
                display: block;
                position: relative;
                line-height: 22px;
                font-size: 16px;
                height: 22px
            }
            .switch input {
                outline: 0;
                opacity: 0;
                width: 0;
                height: 0
            }
            .slider {
                width: 50px;
                height: 22px;
                border-radius: 22px;
                cursor: pointer;
                background-color: grey
            }
            .slider,.slider:before {
                display: inline-block;
                transition: .4s
            }
            .slider:before {
                position: relative;
                content: "";
                border-radius: 50%;
                height: 16px;
                width: 16px;
                left: 4px;
                top: 3px;
                background-color: #fff
            }
            input:checked+.slider {
                background-color: #ff3034
            }
            input:checked+.slider:before {
                -webkit-transform: translateX(26px);
                transform: translateX(26px)
            }
            select {
                border: 1px solid #363636;
                font-size: 14px;
                height: 22px;
                outline: 0;
                border-radius: 5px
            }
            .image-container {
                position: relative;
                min-width: 160px
            }
            .close {
                position: absolute;
                right: 5px;
                top: 5px;
                background: #ff3034;
                width: 16px;
                height: 16px;
                border-radius: 100px;
                color: #fff;
                text-align: center;
                line-height: 18px;
                cursor: pointer
            }
            .hidden {
                display: none
            }
        </style>   
        <script src="https:\/\/fustyles.github.io/webduino/Tracking_20190917/tracking-min.js"></script>     
    </head>
    <figure>
      <div id="stream-container" class="image-container hidden">
        <div class="close" id="close-stream">×</div>
        <img id="stream" src="" crossorigin="anonymous">
        <table>
          <tr>
          <td align="left"><input type="range" id="leftpoint" min="0" max="1" value="0.8" step="0.05" required></td>
          <td align="right"><input type="range" id="rightpoint" min="0" max="1" value="0.2" step="0.05" required></td>
          </tr>
          <tr>
          <td colspan="2"><canvas id="canvas" width="0" height="0"></canvas><canvas id="canvas_pixel" style="display:none;"></canvas></td>
          </tr>
        </table>
      </div>
    </figure>
      <section id="buttons">
              <table>
                <tr><td colspan="3">IP: <input type="text" id="ip" value=""><input type="button" id="setip" value="Set IP" onclick="start();"></td></tr>
                <tr>
                <td align="left"><button id="restartButton">Restart</button></td>
                <td align="center"><button id="get-still">get-still</button></td>
                <td align="right"><button id="toggle-stream">Start Stream</button></td>
                </tr>
              </table>                  
      </section>    
        <section class="main">
            <section id="buttons">
                <table id="buttonPanel" style="display:none">
                  <tr><td colspan="3"><input type="checkbox" id="nostop" onclick="noStop();">No Stop</td></tr> 
                  <tr bgcolor="#363636">
                  <td align="center"><button onmousedown="stopDetection();car('/control?var=car&val=6');" onmouseup="noStop();" ontouchstart="event.preventDefault();car('/control?var=car&val=6');" ontouchend="noStop();">FrontLeft</button></td>
                  <td align="center"><button onmousedown="stopDetection();car('/control?var=car&val=1');" onmouseup="noStop();" ontouchstart="event.preventDefault();car('/control?var=car&val=1');" ontouchend="noStop();">Front</button></td>
                  <td align="center"><button onmousedown="stopDetection();car('/control?var=car&val=7');" onmouseup="noStop();" ontouchstart="event.preventDefault();car('/control?var=car&val=7');" ontouchend="noStop();">FrontRight</button></td>
                  </tr>
                  <tr bgcolor="#363636">
                  <td align="center"><button onmousedown="stopDetection();car('/control?var=car&val=2');" onmouseup="noStop();" ontouchstart="event.preventDefault();car('/control?var=car&val=2');" ontouchend="noStop();">Left</button></td>
                  <td align="center"><button onclick="stopDetection();car('/control?var=car&val=3');">Stop</button></td>
                  <td align="center"><button onmousedown="stopDetection();car('/control?var=car&val=4');" onmouseup="noStop();" ontouchstart="event.preventDefault();car('/control?var=car&val=4');" ontouchend="noStop();">Right</button></td>
                  </tr>
                  <tr bgcolor="#363636"><td align="center"><button onmousedown="stopDetection();car('/control?var=car&val=8');" onmouseup="noStop();" ontouchstart="event.preventDefault();car('/control?var=car&val=8');" ontouchend="noStop();">LeftAfter</button></td>
                  <td align="center"><button onmousedown="stopDetection();car('/control?var=car&val=5');" onmouseup="noStop();" ontouchstart="event.preventDefault();car('/control?var=car&val=5');" ontouchend="noStop();">Back</button></td>
                  <td align="center"><button onmousedown="stopDetection();car('/control?var=car&val=9');" onmouseup="noStop();" ontouchstart="event.preventDefault();car('/control?var=car&val=9');" ontouchend="noStop();">RightAfter</button></td>
                  </tr>            
                </table>
            </section>         
            <div id="logo">
                <label for="nav-toggle-cb" id="nav-toggle">&#9776;&nbsp;&nbsp;Toggle settings</label>
            </div>
            <div id="content">
                <div id="sidebar">
                    <input type="checkbox" id="nav-toggle-cb">
                    <nav id="menu">
                        <div class="input-group" id="rectheight-group">
                            <label for="rectheight">Rect Height</label>
                            <div class="range-min">20</div>
                            <input type="range" id="rectheight" min="20" max="400" step="10" value="30" class="my-action">
                            <div class="range-max">320</div>
                        </div>
                        <div class="input-group" id="Rmin-group">
                            <label for="Rmin">R min</label>
                            <div class="range-min">0</div>
                            <input type="range" id="Rmin" min="0" max="255" value="0" step="1" class="my-action">
                            <div class="range-max">255</div>
                        </div>
                        <div class="input-group" id="Rmax-group">
                            <label for="Rmax">R max</label>
                            <div class="range-min">0</div>
                            <input type="range" id="Rmax" min="0" max="255" value="0" step="1" class="my-action">
                            <div class="range-max">255</div>
                        </div>
                        <div class="input-group" id="Gmin-group">
                            <label for="Gmin">G min</label>
                            <div class="range-min">0</div>
                            <input type="range" id="Gmin" min="0" max="255" value="0" step="1" class="my-action">
                            <div class="range-max">255</div>
                        </div>
                        <div class="input-group" id="Gmax-group">
                            <label for="Gmax">G max</label>
                            <div class="range-min">0</div>
                            <input type="range" id="Gmax" min="0" max="255" value="0" step="1" class="my-action">
                            <div class="range-max">255</div>
                        </div>						
                        <div class="input-group" id="Bmin-group">
                            <label for="Bmin">B min</label>
                            <div class="range-min">0</div>
                            <input type="range" id="Bmin" min="0" max="255" value="0" step="1" class="my-action">
                            <div class="range-max">255</div>
                        </div>						
                        <div class="input-group" id="Bmax-group">
                            <label for="Bmax">B max</label>
                            <div class="range-min">0</div>
                            <input type="range" id="Bmax" min="0" max="255" value="0" step="1" class="my-action">
                            <div class="range-max">255</div>
                        </div>
						<div class="input-group" id="pixel-group">
                            <label for="pixel">Pixel Map</label>
                            <div class="switch">
                                <input id="pixel" type="checkbox">
                                <label class="slider" for="pixel"></label>
                            </div>
                        </div>	
                        <div class="input-group" id="detectState-group">
                            <label for="detectState">Start Detect</label>
                            <div class="switch">
                                <input id="detectState" type="checkbox">
                                <label class="slider" for="detectState"></label>
                            </div>
                        </div>
                        <div class="input-group" id="motorState-group">
                            <label for="motorState">Control Motor</label>
                            <div class="switch">
                                <input id="motorState" type="checkbox">
                                <label class="slider" for="motorState"></label>
                            </div>
                        </div> 						
                        <div class="input-group" id="speedR-group">
                            <label for="speedR">speed R</label>
                            <div class="range-min">0</div>
                            <input type="range" id="speedR" min="0" max="255" value="255" class="default-action">
                            <div class="range-max">255</div>
                        </div>
                        <div class="input-group" id="speedL-group">
                            <label for="speedL">speed L</label>
                            <div class="range-min">0</div>
                            <input type="range" id="speedL" min="0" max="255" value="255" class="default-action">
                            <div class="range-max">255</div>
                        </div>                        
                        <div class="input-group" id="decelerate-group">
                            <label for="decelerate">Turn Decelerate</label>
                            <div class="range-min">0</div>
                            <input type="range" id="decelerate" min="0" max="1" value="0.6" step="0.1" class="default-action">
                            <div class="range-max">1</div>
                        </div>
                        <div class="input-group" id="turnDelayMax-group">
                            <label for="turnDelayMax">Turn Delay Max</label>
                            <div class="range-min">10</div>
                            <input type="range" id="turnDelayMax" min="10" max="1000" value="60" step="10" class="my-action">
                            <div class="range-max">1000</div>
                        </div>
                        <div class="input-group" id="turnDelayMin-group">
                            <label for="turnDelayMin">Turn Delay Min</label>
                            <div class="range-min">10</div>
                            <input type="range" id="turnDelayMin" min="10" max="1000" value="30" step="10" class="my-action">
                            <div class="range-max">1000</div>
                        </div>
                        <div class="input-group" id="forwardDelay-group">
                            <label for="forwardDelay">Forward Delay</label>
                            <div class="range-min">10</div>
                            <input type="range" id="forwardDelay" min="10" max="1000" value="30" step="10" class="my-action">
                            <div class="range-max">1000</div>
                        </div>
						<div class="input-group" id="panel-group">
                            <label for="panel">Button Panel</label>
                            <div class="switch">
                                <input id="panel" type="checkbox">
                                <label class="slider" for="panel"></label>
                            </div>
                        </div>						
                        <div class="input-group" id="servo-group">
                            <label for="servo">Servo</label>
                            <div class="range-min">0</div>
                            <input type="range" id="servo" min="0" max="180" value="90" class="default-action">
                            <div class="range-max">180</div>
                        </div>                       
                        <div class="input-group" id="flash-group">
                            <label for="flash">Flash</label>
                            <div class="range-min">0</div>
                            <input type="range" id="flash" min="0" max="255" value="0" class="default-action">
                            <div class="range-max">255</div>
                        </div>
                        <div class="input-group" id="framesize-group">
                            <label for="framesize">Resolution</label>
                            <select id="framesize" class="default-action">
                                <option value="10">UXGA(1600x1200)</option>
                                <option value="9">SXGA(1280x1024)</option>
                                <option value="8">XGA(1024x768)</option>
                                <option value="7">SVGA(800x600)</option>
                                <option value="6">VGA(640x480)</option>
                                <option value="5">CIF(400x296)</option>
                                <option value="4" selected="selected">QVGA(320x240)</option>
                                <option value="3">HQVGA(240x176)</option>
                                <option value="0">QQVGA(160x120)</option>
                            </select>
                        </div>
                        <div class="input-group" id="quality-group">
                            <label for="quality">Quality</label>
                            <div class="range-min">10</div>
                            <input type="range" id="quality" min="10" max="63" value="10" class="default-action">
                            <div class="range-max">63</div>
                        </div>
                        <div class="input-group" id="brightness-group">
                            <label for="brightness">Brightness</label>
                            <div class="range-min">-2</div>
                            <input type="range" id="brightness" min="-2" max="2" value="0" class="default-action">
                            <div class="range-max">2</div>
                        </div>
                        <div class="input-group" id="contrast-group">
                            <label for="contrast">Contrast</label>
                            <div class="range-min">-2</div>
                            <input type="range" id="contrast" min="-2" max="2" value="0" class="default-action">
                            <div class="range-max">2</div>
                        </div>
                        <div class="input-group" id="hmirror-group">
                            <label for="hmirror">H-Mirror</label>
                            <div class="switch">
                                <input id="hmirror" type="checkbox" class="default-action" checked="checked">
                                <label class="slider" for="hmirror"></label>
                            </div>
                        </div>
                        <div class="input-group" id="vflip-group">
                            <label for="vflip">V-Flip</label>
                            <div class="switch">
                                <input id="vflip" type="checkbox" class="default-action" checked="checked">
                                <label class="slider" for="vflip"></label>
                            </div>
                        </div>
                    </nav>
                </div>
            </div>
        </section>
        <div id="result" style="color:yellow"></div> 
      </body>
  </html>
  
        <script> 
          //  網址/?192.168.1.38  可自動帶入?後參數IP值
          var href=location.href;
          if (href.indexOf("?")!=-1) {
            document.getElementById("ip").value = location.search.split("?")[1].replace(/http:\/\//g,"");
          }
          else if (href.indexOf("http")!=-1) {
            document.getElementById("ip").value = location.host;
          } 

          function start() {
            window.stop();
            
            var baseHost = 'http://'+document.getElementById("ip").value;  //var baseHost = document.location.origin
            var streamUrl = baseHost + ':81'
          
            const hide = el => {
              el.classList.add('hidden')
            }
            const show = el => {
              el.classList.remove('hidden')
            }
          
            const disable = el => {
              el.classList.add('disabled')
              el.disabled = true
            }
          
            const enable = el => {
              el.classList.remove('disabled')
              el.disabled = false
            }
          
            const updateValue = (el, value, updateRemote) => {
              updateRemote = updateRemote == null ? true : updateRemote
              let initialValue
              if (el.type === 'checkbox') {
                initialValue = el.checked
                value = !!value
                el.checked = value
              } else {
                initialValue = el.value
                el.value = value
              }
			  el.title = value;
          
              if (updateRemote && initialValue !== value) {
                updateConfig(el);
              }
            }
          
            function updateConfig (el) {
              let value
              switch (el.type) {
                case 'checkbox':
                  value = el.checked ? 1 : 0
                  break
                case 'range':
                case 'select-one':
                  value = el.value
                  break
                case 'button':
                case 'submit':
                  value = '1'
                  break
                default:
                  return
              }
          
              const query = `${baseHost}/control?var=${el.id}&val=${value}`
			  el.title = value;
			  
              fetch(query)
                .then(response => {
                  console.log(`request to ${query} finished, status: ${response.status}`)
                })
            }
          
            document
              .querySelectorAll('.close')
              .forEach(el => {
                el.onclick = () => {
                  hide(el.parentNode)
                }
              })
          
            // read initial values
            fetch(`${baseHost}/status`)
              .then(function (response) {
                return response.json()
              })
              .then(function (state) {
                document
                  .querySelectorAll('.default-action')
                  .forEach(el => {
                      updateValue(el, state[el.id], false)
                  })
				result.innerHTML = "Connection successful";
              })
          
            const view = document.getElementById('stream')
            const viewContainer = document.getElementById('stream-container')
            const stillButton = document.getElementById('get-still')
            const streamButton = document.getElementById('toggle-stream')
            const closeButton = document.getElementById('close-stream')
            const restartButton = document.getElementById('restartButton')
          
            const stopStream = () => {
              //window.stop();
              streamButton.innerHTML = 'Start Stream';
              hide(viewContainer)
            }
          
            const startStream = () => {
              view.src = `${streamUrl}/stream`
              show(viewContainer)
              streamButton.innerHTML = 'Stop Stream'
            }

            //新增重啟電源按鈕點選事件 (自訂指令格式：http://192.168.xxx.xxx/control?cmd=P1;P2;P3;P4;P5;P6;P7;P8;P9)
            restartButton.onclick = () => {
              fetch(baseHost+"/control?restart");
            }            
          
            // Attach actions to buttons
            stillButton.onclick = () => {
              stopStream()
              view.src = `${baseHost}/capture?_cb=${Date.now()}`
              show(viewContainer)
            }
          
            closeButton.onclick = () => {
              stopStream()
              hide(viewContainer)
            }
          
            streamButton.onclick = () => {
              const streamEnabled = streamButton.innerHTML === 'Stop Stream'
              if (streamEnabled) {
                stopStream()
              } else {
                startStream()
              }
            }
          
            // Attach default on change action
            document
              .querySelectorAll('.default-action')
              .forEach(el => {
                el.onchange = () => updateConfig(el)
              })
			  
			// 自訂類別my-action, title屬性顯示數值
            document
              .querySelectorAll('.my-action')
              .forEach(el => {
				el.title = el.value;
                el.onchange = () => el.title = el.value;
              })			  
          
            // Custom actions
          
            const framesize = document.getElementById('framesize')
          
            framesize.onchange = () => {
              updateConfig(framesize)
            }                                 
          }


          //法蘭斯影像辨識
          const aiView = document.getElementById('stream');
          const aiStill = document.getElementById('get-still')
          const canvas = document.getElementById('canvas');     
          var context = canvas.getContext("2d");
		  const canvas_pixel = document.getElementById('canvas_pixel');
		  var context_pixel = canvas_pixel.getContext('2d'); 		  
          const nostop = document.getElementById('nostop');
          const detectState = document.getElementById('detectState');
          const autodetect = document.getElementById('autodetect');
          const motorState = document.getElementById('motorState');
          const servo = document.getElementById('servo');
          const panel = document.getElementById('panel');
          const result = document.getElementById('result');
          const ip = document.getElementById('ip');
		  
		  const pixelState = document.getElementById('pixel');
		  const rectheight = document.getElementById('rectheight');
		  const Rmin = document.getElementById('Rmin');
		  const Rmax = document.getElementById('Rmax');
		  const Gmin = document.getElementById('Gmin');
		  const Gmax = document.getElementById('Gmax');
		  const Bmin = document.getElementById('Bmin');
		  const Bmax = document.getElementById('Bmax');
		  const turnDelayMax = document.getElementById('turnDelayMax');  //遠離時迴轉時間
		  const turnDelayMin = document.getElementById('turnDelayMin');  //偏離時迴轉時間
		  const forwardDelay = document.getElementById('forwardDelay');  //前進時持續時間
          var servoAngle = 30;  //伺服馬達預設位置
          var lastDirection = "";  //記錄前一動作行進方向
		  
		  const tracker = new tracking.ColorTracker();

          panel.onchange = function(e){  
            if (!panel.checked)
              buttonPanel.style.display = "none";
            else
              buttonPanel.style.display = "block";
          }                       
          
          function car(query) {
             query = "http:\/\/" + ip.value + query;
             fetch(query)
                .then(response => {
                  console.log(`request to ${query} finished, status: ${response.status}`)
                })
          }
                
          function noStop() {
            if (!nostop.checked) {
              car('/control?var=car&val=3');
            }
          }

          detectState.onclick = function() {
            if (detectState.checked == true) {
              aiView.style.display = "none";
              canvas.style.display = "block";
              aiStill.click();
            } else {
              aiView.style.display = "block";
              canvas.style.display = "none";
            }
          }
		  
		  pixel.onclick = function() {
            if (pixelState.checked == true) {
              canvas_pixel.style.display = "block";
            } else {
              canvas_pixel.style.display = "none";
            }
          }		  
            
          function stopDetection() {
            detectState.checked = false;
            aiView.style.display = "block";
            canvas.style.display = "none";  
          }

          aiView.onload = function (event) {
			if (detectState.checked == false) return;
			
			canvas.setAttribute("width", aiView.width);
			canvas.setAttribute("height", aiView.height);
			canvas_pixel.setAttribute("width", aiView.width);
			canvas_pixel.setAttribute("height", aiView.height);  
			context.drawImage(aiView,0,0,aiView.width,aiView.height);
				 
			var imgData=context.getImageData(0,0,canvas.width,canvas.height);
			var y1 = aiView.height/2-Number(rectheight.value)/2;
			var y2 = aiView.height/2+Number(rectheight.value)/2;

			for (var i=0;i<imgData.data.length;i+=4) {
				var r=0;
				var g=0;
				var b=0;
				if ((imgData.data[i]>=Rmin.value&&imgData.data[i]<=Rmax.value)&&(imgData.data[i+1]>=Gmin.value&&imgData.data[i+1]<=Gmax.value)&&(imgData.data[i+2]>=Bmin.value&&imgData.data[i+2]<=Bmax.value)) {
				  if (aiView.width*4*y1<=i&&aiView.width*4*y2>=i)
					r=255;
				  else
					r=0;
				}

				imgData.data[i]=r;
				imgData.data[i+1]=g;
				imgData.data[i+2]=b;
				imgData.data[i+3]=255;
			}
			context_pixel.putImageData(imgData,0,0);

			tracking.track('#canvas_pixel', tracker);
  
			context.strokeStyle = "cyan";
			context.fillStyle = "cyan";
			context.lineWidth = 5;	    
			context.beginPath();
			context.arc(leftpoint.value*aiView.width/2,aiView.height/2,3, 6.284, false, false, '#ff0000', 0, 1);
			context.fill();
			context.beginPath();
			context.arc(aiView.width/2+rightpoint.value*aiView.width/2,aiView.height/2,3, 6.284, false, false, '#ff0000', 0, 1);
			context.fill();
          }  

		tracking.ColorTracker.registerColor('red', function(r, g, b) {
		  if ((r==255)&&(g==0)&&(b==0)) {
			return true;
		  }		  
		  return false;
		});
	 
		var trackedColors = {
		  custom: true
		};
	  
		Object.keys(tracking.ColorTracker.knownColors_).forEach(function(color) {
		  trackedColors[color] = true;
		});
	  
		var colors = [];
		for (var color in trackedColors) {
		  if (trackedColors[color]) {
		  colors.push(color);
		  }
		}
		tracker.setColors(colors);
		
		tracker.on('track', function(event) {
		
		  event.data.forEach(function(rect) {
			context.strokeStyle = rect.color;
			context.strokeRect(rect.x, rect.y, rect.width, rect.height);
			//context.font = '11px Helvetica';
			//context.fillStyle = "#fff";
			//context.fillText('x: ' + rect.x + 'px', rect.x + rect.width + 5, rect.y + 11);
			//context.fillText('y: ' + rect.y + 'px', rect.x + rect.width + 5, rect.y + 22);

			//result.innerHTML+= rect.color+","+rect.x+","+rect.y+","+rect.width+","+rect.height+"<br>";
			
			if (rect.color=="red"&&motorState.checked) {
				var xl = leftpoint.value*aiView.width/2;
				var yl = aiView.height/2;
				var xr = aiView.width/2+rightpoint.value*aiView.width/2;
				var yr = aiView.height/2;
				var xls = -1;
				var xrs = -1;
				if (xl<rect.x)
					var xls = 0;
				else if (xl>=rect.x&&xl<=(rect.x+rect.width))
					var xls = 1;
				else if (xl>(rect.x+rect.width))
					var xls = 2;
					
				if (xr<rect.x)
					var xrs = 0;
				else if (xr>=rect.x&&xr<=(rect.x+rect.width))
					var xrs = 1;
				else if (xr>(rect.x+rect.width))
					var xrs = 2;
				
				var position = "";
				if (xls==0&&xrs==0) {
					result.innerHTML= "偏左遠離";
					position = "leftfar";
				} else if (xls==0&&xrs==2) {
					result.innerHTML= "正常";
					position = "normal";
				} else if (xls==0&&xrs==1) {
					result.innerHTML= "偏左";
					position = "left";
				} else if (xls==1&&xrs==1) {
					result.innerHTML= "正常";
					position = "normal";
				} else if (xls==1&&xrs==2) {
					result.innerHTML= "偏右";
					position = "right";
				} else if (xls==2&&xrs==2) {
					result.innerHTML= "偏右遠離";
					position = "rightfar";
				} else {
					result.innerHTML= "無法判別";
					position = "";
				}
					
				context.font = '30px Helvetica';
				context.fillStyle = "#fff";
				context.fillText(result.innerHTML, 0, 30);				
				
				  var delay=0;
				  if (position.indexOf("right")!=-1) {
					if (position=="right") {  //物件中心點偏左
						delay = turnDelayMin.value;
					} else {  //物件中心點偏左遠離
						delay = turnDelayMax.value;
					} 
					if (!hmirror.checked) {  //鏡像左右位置相反
					  car('/control?car=6;'+delay);  //左前進
					  lastDirection = "left";
					} else {                
					  car('/control?car=7;'+delay);  //右前進
					  lastDirection = "right";
					}
				  } else if (position.indexOf("left")!=-1) {
					if (position=="left") { //物件中心點偏右
					  delay = turnDelayMin.value;
					} else { //物件中心點偏右遠離
					  delay = turnDelayMax.value;
					}
					if (!hmirror.checked) {  //鏡像左右位置相反
					  car('/control?car=7;'+delay);  //右前進
					  lastDirection = "right";
					}
					else {                           
					  car('/control?car=6;'+delay);  //左前進
					  lastDirection = "left";
					}
				  } else if (position=="normal") {  //位於線上位置則前進
					car('/control?car=1;' + forwardDelay.value);
				  }
				  return;
			}
			
		});
		
		if (event.data.length==0&&motorState.checked) {  //若畫面中完全偵測不到線，則依前一動作反向轉動。
			if (lastDirection = "right")
				car('/control?car=6;' + turnDelayMin.value);
			else if (lastDirection = "left")
				car('/control?car=7;' + turnDelayMin.value);
		}		

		try { 
			document.createEvent("TouchEvent");
			setTimeout(function(){aiStill.click();},250);
		}
		catch(e) { 
			setTimeout(function(){aiStill.click();},150);
		}		  
	});            
  </script>